<!-- 全景视频详情页 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="css/Normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet">
  <title>森茉文化传媒</title>
</head>
<style>
  html {
    background-color: rgba(238, 238, 238, 1);
  }

  .detail-header {
    display: none;
  }

  .detail-title {
    font-size: 1.8rem;
    font-family: PingFang-SC-Bold, Arial, "Microsoft Yahei";
  }

  .section-show {
    padding-top: 4.4rem;
  }

  .footer {
    margin-top: 3rem;
    padding: 3rem 0;
  }


  @media (min-width:750px) {
    .section-show {
      height: 44.3rem;
      width: 60rem;
      margin: 2rem 18rem 0 18rem;
      padding: 1.5rem;
      background-color: white;
    }

    .detail-desc-title {
      font-size: 1rem;
      margin-top: 3rem;
    }

    .detail-desc-introduction {
      margin: 1rem 0 1.5rem 0;
      font-size: 0.8rem;
    }
    .detail-desc-time {
      font-size: 1rem;
    }
    .vr-detail-video {
      height: 32rem;
      position: relative;
    }
  }

  @media (max-width:750px) {
    .header,
    .footer {
      display: none;
    }
    .img-list img {
      width: 100%;
    }
    .detail-header {
      z-index: 999;
      display: flex;
      position: fixed;
      height: 4.4rem;
      width: 100%;
      padding: 0 1rem;
      align-items: center;
      justify-content: space-between;
    }
    .detail-desc {
      padding: 1.5rem;
    }
    .detail-desc-title {
      font-size: 1.4rem;
    }
    .detail-desc-introduction {
      margin: 1rem 0 1.5rem 0;
      font-size: 1.2rem;
    }

    .detail-desc-time {
      font-size: 1rem;
    }

    .section-show {
      background-color: white;
    }

    .gray {
      height: 1.5rem;
      background-color: rgba(238, 238, 238, 1);
    }


    .vr-detail-video {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
</style>

<body>
  <header class="header">
  </header>
  <!-- PC头部 -->
  <!-- 移动端头部 -->
  <!-- <header class="detail-header color26">
    <div class="detail-back">
      <img class="icon-back" src="./images/ic_back.png" alt="">
    </div>
    <div class="detail-title color255 bold"></div>
    <div></div>
  </header> -->
  <section class="section-show">
    <div class="vr-detail-video" id="vr-detail-video">
    </div>
    <div class="detail-desc">
      <p class="detail-desc-title font-Regular color26 bold"></p>
      <p class="detail-desc-introduction font-Regular color153"></p>
      <p class="detail-desc-time font-Regular color153"></p>
    </div>
  </section>
  <section class="gray">
  </section>
  <section class="section-recommend">
    <p class="recommend-title">为您推荐</p>
    <div class="recommend-img-list"></div>
  </section>

  <footer class="footer color26"></footer>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="./js/BaseJs.js"></script>

  <script language="javascript" type="text/javascript" src="./player/UtoVRPlayerGuide.js"></script>

  <script>
    $('.header').append(BaseJs.htmlHeader);
    $('.footer').append(BaseJs.htmlFooter);
    BaseJs.isIE();
    BaseJs.calRem();
    BaseJs.navActive(3);
    BaseJs.getCompanyInfo();
    var id = BaseJs.getUrlId(window.location.href);
    BaseJs.searchBtnHover();

    BaseJs.getData(BaseJs.api + 'media/' + id, function (item) {
      var title = item.title;
      var url = item.url;
      var cover = item.cover;
      var introduction = item.description;
      var time = item.createAt.split(" ")[0];
      $('.detail-title').append(title);
      $('.detail-desc-title').append(title);
      $('.detail-img .source').attr("src", url);
      $('.detail-img #my-player').attr("poster", cover);
      $('.detail-desc-introduction').append(introduction);
      $('.detail-desc-time').append(time);
      var params = {
        container: document.getElementById("vr-detail-video"),
        name: "SceneViewer",
        isGyro: true,
        scenesArr: [
          //todo:注意修改视频路径，需要保证播放页面与视频属于s同一域名下
          {
            sceneId: "v1",
            sceneName: "赛车",
            sceneFilePath: url,
            sceneType: "Video",
            fovType: 105,
            isVideoAutoPlay: true //todo:注意isVideoAutoPlay 是H5 模式下的播放属性，不适用于移动端
          }
        ],
        //播放器不支持全景播放回调
        errorCallBack: function (e) {
          alert("浏览器不支持全屏!,请使用其他浏览器");
        },
        //浏览器不支持全屏回调
        fsCallBack: function (status, playObj) {
          alert("浏览器不支持全屏!,请使用其他浏览器");
        },

      };

      initLoad(params);
    })
    BaseJs.getData(BaseJs.api + 'media/random?type=3', function (item) {
      var htmlRecommend = "";
      for (var i = 0; i < item.length && i < 6; i++) {
        htmlRecommend += '<div class="rem-item"><a href="./vr-video-detail.html?id=' + item[i].id +
          '"><img class="rem-img" src="' + item[i].cover +
          '"><div class="rem-desc"><p class="margin-top-20 font-size-16 color26 font-Regular">' +
          item[i].title +
          '</p><p class="margin-top-10 font-size-16 color153 font-Regular">' + item[i].description +
          '</p></div></div></a>'
      }
      $('.recommend-img-list').append(htmlRecommend);
    })

    $('.detail-back').click(function () {
      BaseJs.goBack();
    })
    
    $('#search-btn').click(function (e) {
      BaseJs.searchEvent(e);
    })
  </script>
</body>

</html>